<template>
  <a-popover v-if="attrList[0]" position="bottom">
    <div class="text-limit">{{ getAllName() }}</div>
    <template #content>
      <div v-for="(item, index) of attrList" :key="index">{{ item.name }}: {{ getValue(item) }} </div>
    </template>
  </a-popover>
  <div v-else>--</div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  let props = defineProps(['info'])
  let attrList = ref(props.info.propList || [])

  const getValue = (data: any) => {
    let text = ''
    switch (data.type) {
      case 1:
        text = data.valueStr
        break
      case 2:
        text = data.valueStrList.join(', ')
        break
      case 3:
        text = data.valueBoolean ? '是' : '否'
        break
      case 4:
        text = data.valueStr
        break
      case 5:
        text = data.valueNumber
        break
      case 6:
        text = data.valueBigDecimal
        break
      case 7:
        text = data.valueStrList.join(', ')
        break
      case 8:
        text = data.valueStrList.join(', ')
        break
    }
    return text
  }

  const getAllName = () => {
    let arr: any = []
    attrList.value.forEach((e: any) => {
      arr.push(e.name)
    })
    return arr.join(',')
  }
</script>

<style lang="less" scoped></style>
